<script>
import GmTable from "@/view/components/gmTable.vue";
import treeCom from "@/view/traffic/studentCom/treeCom.vue";
let baseUrl = 'http://36.137.92.253:9000'
export default {
  name: "statisticsStudentTrip",
  components: {treeCom, GmTable},
  data() {
    return {
      dataList: [],
      stageList:[],
      companyList: {},
      tablePage: {
        total: 0,
        current: 1,
        size: 20
      },
      tableForm: {
        stattype:'c',
        companycode:''
      }
    }
  },
  mounted() {
    this.getAllList()
    ///t-transportation-company-information/findPageAuth?companyName=&current=1&size=10
    this.$HttpService.get(`/t-transportation-company-information/findPageAuth?companyName=&current=1&size=10`).then((res) => {
      this.companyList = res.records;
    })
  },
  methods: {
    getAllList() {
      fetch(`${baseUrl}/api/statisticstransportationcompany?exporttype=no&stattype=${this.tableForm.stattype}&companycode=${this.tableForm.companycode}&page=${this.tablePage.current}&limit=${this.tablePage.size}`).then((res)=>{
        return res.json()
      }).then((data) => {
          console.log('data',data)
        this.dataList = data.TStatisticsTransportationCompanyStatistics?data.TStatisticsTransportationCompanyStatistics:[];
        this.tablePage.total = data.total;
        this.setCompanyList()
      })
    },
    setCompanyList() {
      this.dataList.forEach(item => {
        this.companyList[item.Company_name] = item.Company_code
      })
    },
    resetQuery() {
      this.tableForm.stattype = 'c'
      this.tableForm.companycode = ''
      this.getAllList()
    },
    exportFile(exporttype){
      window.open(`${baseUrl}/api/statisticstransportationcompany?exporttype=${exporttype}&stattype=${this.tableForm.stattype}&page=${this.tablePage.current}&limit=${this.tablePage.size}`)
    },
    pageChange(page){
      this.tablePage.current = page;
      this.getAllList()
    }
  }
}

</script>

<template>
  <div style="padding-bottom: 20px">
    <div class="search">
      <el-form ref="form" :inline="true" :model="tableForm" label-width="120px">
        <el-form-item label="行政层级">
          <el-select size="small" v-model="tableForm['stattype']" placeholder="请选择行政层级">
            <el-option label="区县级" value="3"></el-option>
            <el-option label="乡镇级" value="4"></el-option>
            <el-option label="社区级" value="5"></el-option>
            <el-option label="学校维度" value="s"></el-option>
            <el-option label="运输公司维度" value="c"></el-option>
            <el-option label="按照学校与学生常住地区划进行统计" value="ss"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="企业名称">
          <el-select size="small" v-model="tableForm['companycode']" placeholder="请选择企业">
          <el-option :label="x.companyName" v-for="x in companyList" :value="x.companyCode"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="">
          <el-button class="filter-item" size="mini" type="success" icon="el-icon-search" @click="getAllList">搜索</el-button>
          <el-button class="filter-item" size="mini" type="warning" icon="el-icon-refresh-left"  @click="resetQuery()">重置</el-button>
          &nbsp;
          <el-dropdown size="small" @command="exportFile">
            <el-button class="filter-item" size="mini" type="info" icon="el-icon-refresh-left">导出</el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="current">导出当前页</el-dropdown-item>
              <el-dropdown-item command="all">全量导出</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-form-item>
      </el-form>
    </div>
    <div class="table">
<!--      <div class="t1">-->
<!--        <tree-com ref="treeDom" @clickNode="clickSchoolTree"></tree-com>-->
<!--      </div>-->
      <div class="t2">
        <el-table :data="dataList" stripe style="width: 100%" type="flex" justify="center" align="middle">
          <el-table-column align="center" v-if="dataList[0]?.District_name_level3 !== ''" prop="District_name_level3" label="县名称"></el-table-column>
          <el-table-column align="center" v-if="dataList[0]?.District_name_level4 !== ''" prop="District_name_level4" label="乡镇（街道）名称"></el-table-column>
          <el-table-column align="center" v-if="dataList[0]?.District_name_level5 !== ''" prop="District_name_level5" label="村（社区）名称"></el-table-column>
          <el-table-column align="center" v-if="dataList[0]?.Company_name !== ''" prop="Company_name" label="运输企业"></el-table-column>
          <el-table-column align="center" v-if="dataList[0]?.Seat_number !== ''" prop="Seat_number" label="车辆座位数"></el-table-column>
          <el-table-column align="center" v-if="dataList[0]?.Car_count !== ''" prop="Car_count" label="车辆数"></el-table-column>
          <el-table-column align="center" v-if="dataList[0]?.Car_number !== ''" prop="Car_number" label="车次数"></el-table-column>
          <el-table-column align="center" v-if="dataList[0]?.School_name !== ''" prop="School_name" label="学校名称"></el-table-column>
          <el-table-column align="center" v-if="dataList[0]?.Education_stage_name !== ''" prop="Education_stage_ame" label="教育等级"></el-table-column>
          <el-table-column align="center" v-if="dataList[0]?.Student_district_name !== ''" prop="Student_district_name" label="学生常驻地村（社区）"></el-table-column>
        </el-table>
      </div>
    </div>
    <div class="page">
      <el-pagination
          :page-size="tablePage.size"
          :pager-count="tablePage.current"
          layout="prev, pager, next"
          background
          @current-change="pageChange"
          :total="tablePage.total">
      </el-pagination>
    </div>
  </div>
</template>

<style scoped>
.search {
  height: 100px;
  width: 98%;
  padding: 20px;
  border-radius: 20px;
  background-color: white;
  margin: 0 auto;
  box-shadow: 3px 3px 3px 2px #e8e8e8;
  position: relative;
  background-image: url('../../assets/images/searbg.jpg');
  background-repeat: no-repeat;
  background-position: right -20px;
  background-size: 14%;
}

.table {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  .t1{
    width: 250px;
    padding: 20px;
    min-height: 40vh;
    background-color: #ffffff;
    border-radius: 20px;
    box-shadow: 3px 3px 3px 2px #e8e8e8;
  }
  .t2{
    width: 100%;
  }
}
.page{
  padding: 20px 0;
  text-align: center;
}
</style>